<template>
	<view class="vdio-item" @click="goToVido(item)">
		<view class="vido-box">
				<view class="ship-lef"> 
				<view class="icon">
					<image src="https://img.alicdn.com/imgextra/i2/847355890/O1CN01t1gSaS1tNfWW77Frq_!!847355890.png" mode=""></image>
				</view>
				<image :src="item.poster" mode=""></image>
				  <!-- <video id="myVideo" :src="videoList.url || ''" :poster="videoList.poster"  loop enable-danmu muted controls v-if="videoList.poster">
					</video> -->
				 </view>
				 <view class="titles">
				 	<view class="futitle inforTitle">
				 		<text v-text="item.fu_title"></text>
				 	</view>
				 	<view class="zhutitle inforTitle2">
				 		<text v-text="item.title"></text>
				 	</view>
				 </view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"vido-item",
		data() {
			return {
				
			};
		},
		props:{
			item:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		methods:{
			goToVido(item){
				uni.createVideoContext('myVideo',this).pause()
				uni.navigateTo({
					url:"/pages/views/vido-view/vido-view?item=" + encodeURIComponent(JSON.stringify(item))
				})
			}
			
		}
	}
</script>

<style lang="scss">
.vdio-item{
	width: 100%;
	height: 170px;
	box-sizing: border-box;
	.vido-box{
		box-shadow: 0px 0px 2px 0px rgba($color: #000000, $alpha: 0.3);
		height: 100%;
		width: 100%;
		background: #fff;
		border-radius: 5px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	box-sizing: border-box;
		.titles{
			height: 90px;
			padding: 5px;
			display: flex;
			flex-direction: column;
			font-size: 14px;
			justify-content: space-between;
	box-sizing: border-box;
			.zhutitle{
	box-sizing: border-box;
				color: #999;
				letter-spacing: 2px;
			}
		}
	}
			.ship-lef{
	box-sizing: border-box;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				// border-radius: 10px;
				overflow: hidden; 
				background: #eee;
				position: relative;
				image{
					width: 100%;
					height: 100%;
					// border-radius: 10px;
					overflow: hidden;
				}
			}
			.icon{
	box-sizing: border-box;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background: rgba(0,0,0,0.3);
				position: absolute;
				z-index: 19;
				top: 50%;
				left: 50%;
				overflow: hidden;
				transform: translate(-50%, -50%);
				image{
					width: 100%;
					height: 100%;
				}
			}
			.inforTitle {
	box-sizing: border-box;
				font-size: 15px;
				position: relative;
				color: #333;
				// font-weight: 400;
				line-height: 1.2;
				// padding-right: 25px;
				text {
					// 俩行超出溢出
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
			.inforTitle2 {
	box-sizing: border-box;
				font-size: 15px;
				position: relative;
				color: #333;
				// font-weight: 400;
				line-height: 1.2;
				// padding-right: 25px;
				text {
					// 俩行超出溢出
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
}
</style>
